<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <script type="text/javascript" src="../static/dist/layui.js"></script>
    <link rel="stylesheet" href="../static/dist/css/layui.css">
    <script type="text/javascript" src="../static/dist/tableSelect.js"></script>
    <title>TableSelect</title>
    <style>
        .layui-table-cell{
            text-align:center;

            height: auto;

            white-space: normal;

        }

        .layui-table img{
            max-width:300px
        }
        .layui-table-cell {
            text-align: center;
            height: auto;
            white-space: normal;
        }

        .layui-table img {
            max-width: 300px
        }

        .message-container {
            display: flex;
            flex-direction: column;
            gap: 10px;
            padding: 10px;
            max-width: 70%;
            margin: 0 auto;
        }

        .message-wrapper {
            display: flex;
            justify-content: flex-start;
        }

        .message-content {
            background-color: #DCF8C6;
            padding: 10px;
            border-radius: 5px;
        }

        .sent-message .message-wrapper {
            justify-content: flex-end;
        }

        .sent-message .message-content {
            background-color: #F4F4F4;
        }

        /* 自定义调整发送消息和接收消息的样式 */
        .sent-message .message-content {
            text-align: right;
        }

        .received-message .message-content {
            text-align: left;
        }


        .message-container {
            display: flex;
            flex-direction: column;
            gap: 10px;
            max-width: 100%;
        }

        .message-wrapper {
            display: flex;
        }

        .message-content {
            padding: 10px;
            border-radius: 5px;
            max-width: 70%;
        }

        .sent-message .message-wrapper {
            justify-content: flex-end;
        }

        .received-message .message-wrapper {
            justify-content: flex-start;
        }

        .chat-box {
            overflow-y: auto;
            height: 500px;
        }

        .input-box {
            display: flex;
            gap: 10px;
            align-items: center;
            margin-top: 0px;
        }

    </style>
</head>

<body>
<div class="layui-row layui-bg-black" >
    <div class="layui-col-md1 layui-bg-black">
        <a href="/">
            <img src="../static/logo.png" class="layui-logo" style="height:55px">
        </a>
        <!--        <p style="padding:27px"></p>-->
    </div>
    <div class="layui-col-md8 layui-bg-black">
        <form class="layui-form" action="" style="padding:11px">
            <div class="layui-form-item" style="height: 18px">
                <div class="layui-input-inline" style="width:850px">
                    <input type="text" name="" placeholder="请输入" autocomplete="off" class="layui-input" id="search">
                </div>
                <button type="button" class="layui-btn layui-btn-primary layui-btn-warm" id="searchBtn">
                    <i class="layui-icon layui-icon-search"></i>
                </button>
            </div>
        </form>
    </div>
    <div class="layui-col-md3 layui-bg-black" >
        <ul class="layui-nav" style="padding:0px;bottom: 3px">
            <ul class="layui-nav" style="padding:0px;bottom: 3px">
                {% if user %}
                    <li class="layui-nav-item">
                        <a href="/user/manage"><img src="../static/yang.jpeg" class="layui-nav-img">我</a>
                        <dl class="layui-nav-child">
                            <dd><a href="/user/manage">订单信息</a></dd>
                            <dd><a href="/user/info">用户信息</a>
                            <dd><a href="/password">修改密码</a></dd>
                            <dd><a href="/loginout">退了</a></dd>
                        </dl>
                    </li>
                {% else %}

                    <li class="layui-nav-item">
                        <a href="">注册/登录</a>
                        <dl class="layui-nav-child">
                            <dd><a href="http://localhost:5000/register">注册</a></dd>
                            <dd><a href="http://localhost:5000/login">登录</a></dd>
                        </dl>
                    </li>
                {% endif %}
                <li class="layui-nav-item">
                    <a href="/user/car">购物车</a>
                </li>
                <li class="layui-nav-item">
                    <a href="/chat">客服<span class="layui-badge-dot"></span></a>
                </li>

            </ul>
        </ul>
    </div>
</div>

<div class="layui-row  layui-bg-cyan" style="padding: 8px">
    <div class="layui-col-md1" style="left: 20px">
        <button type="button" class="layui-btn layui-btn-xs" >
            <a href="/show/shop?type=0">全部</a>
        </button>
    </div>
    <div class="layui-col-md11" style="right: 20px">
         <span class="layui-breadcrumb" lay-separator="|">
            <a href="/show/shop?type=1">酒水饮料</a>
            <a href="/show/shop?type=2">当季水果</a>
            <a href="/show/shop?type=3">面包糕点</a>
            <a href="/show/shop?type=4">肉干卤味</a>
            <a href="/show/shop?type=5">糖果果冻</a>
            <a href="/show/shop?type=6">膨化食品</a>
            <a href="/show/shop?type=7">饼干曲奇</a>
            <a href="/show/shop?type=8">坚果炒货</a>
            <a href="/show/shop?type=9">蛋糕甜品</a>
            <a href="/show/shop?type=10">蛋挞披萨</a>
         </span>
    </div>
</div>

<div class="layui-row">
    <div class="layui-col-md2">
         <ul class="layui-nav layui-nav-tree layui-bg-cyan" lay-filter="test" style="top: 1px; height: 600px">
            <li class="layui-nav-item" style="top: 100px"><a href="/user/info">用户信息</a></li>
            <li class="layui-nav-item" style="top: 100px"><a href="/user/manage">订单信息</a></li>
            <li class="layui-nav-item" style="top: 100px"><a href="/get/preferences">喜好分析</a></li>
            <li class="layui-nav-item" style="top: 100px"><a href="/chat">人工服务</a></li>
        </ul>
    </div>
    <div class="layui-col-md10">
        <div class="chat-box">
            <div class="message-container" id="chatContainer">
                <div><p style="font-size: 80px">欢迎使用懒洋洋商城智能客服</p></div>
            </div>
        </div>
    </div>
</div>
<div class="layui-row">
    <div class="layui-col-md10 layui-col-lg-offset2 layui-bg-red"  style="bottom: 70px;height: 0px">
        hh
        <div class="input-box">
            <input type="text" name="" placeholder="请输入" autocomplete="off" class="layui-input" id="chat">
            <button type="button" class="layui-btn layui-btn-primary layui-btn-warm" id="chatBtn" >
                发送
            </button>
        </div>
    </div>
</div>


<div class=" layui-row layui-bg-cyan">
    <div style="bottom: 100px">
        <p>技术支持：懒洋洋小队</p>
    </div>
</div>


<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

<script>
    $("#searchBtn").click(function() {
        var keyword = $("#search").val();
        window.location.href = "/show/search?"+"keyword="+keyword;
    });
</script>

<script>
    layui.use('carousel', function(){
        var carousel = layui.carousel;
        //建造实例
        carousel.render({
            elem: '#test1'
            ,width: '100%' //设置容器宽度
            ,arrow: 'always' //始终显示箭头
            //,anim: 'updown' //切换动画方式
        });
    });
</script>
<script>
    $(document).ready(function () {
        $("#chatBtn").click(function () {
            var msg = $("#chat").val();

            // 添加您发送的消息到右侧
            var chatContainer = document.getElementById("chatContainer");
            var sentMessageWrapper = document.createElement("div");
            sentMessageWrapper.className = "message-wrapper sent-message";
            var sentMessageContent = document.createElement("p");
            sentMessageContent.className = "message-content sent-message";
            sentMessageContent.textContent = msg;
            sentMessageWrapper.appendChild(sentMessageContent);
            chatContainer.appendChild(sentMessageWrapper);

            $.ajax({
                url: "/api/chat",
                type: "GET",
                data: {
                    key: "free",
                    appid: 0,
                    msg: msg
                },
                success: function (response) {
                    var data = response.data;
                    var content = data.content;

                    // 添加从接口返回的消息到左侧
                    var receivedMessageWrapper = document.createElement("div");
                    receivedMessageWrapper.className = "message-wrapper received-message";
                    var receivedMessageContent = document.createElement("p");
                    receivedMessageContent.className = "message-content received-message";
                    receivedMessageContent.textContent = content;
                    receivedMessageWrapper.appendChild(receivedMessageContent);
                    chatContainer.appendChild(receivedMessageWrapper);
                },
                error: function (error) {
                    alert("没有得到数据");
                }
            });

            // 清空输入框内容
            $("#chat").val("");
        });
    });
</script>
</body>
</html>